import 'package:flutter/material.dart';

class ShopList extends StatelessWidget {
  ShopList({super.key, required this.goods});

  Map goods = {
    // "createTime": "2024-08-15 21:49:48",
    // "orderState": "待发货",
    // "image":
    //     "https://yanxuan-item.nosdn.127.net/a09de222ed32efa8ffe359b1d5780574.jpg",
    // "name": "茶水分离杯耐热隔热玻璃杯 茶水分离杯耐热隔热玻璃杯",
    // "totalNum": 2,
    // "curPrice": 119.5,
    // "totalMoney": 119.5,
    // "attrsText": "规格:白色240ml"
  };

  /// 生成订单状态的方法
  String getOrderState(int state) {
    String orderState = '待付款';
    switch (state) {
      case 1:
        orderState = '待付款';
        break;
      case 2:
        orderState = '待发货';
        break;
      case 3:
        orderState = '待收货';
        break;
      case 4:
        orderState = '待评价';
        break;
      default:
        orderState = '其他';
    }
    return orderState;
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
        onTap: () {
          // 跳转方式1
          // Navigator.push(context, MaterialPageRoute(builder: (context) => const OrderDetail(goodsId: 'sk001')),
          // );

          // 跳转方式2
          Navigator.pushNamed(context, '/detail',
              arguments: {'goodsId': 'sk999', 'name': '小明'});
        },
        child: Container(
            padding: const EdgeInsets.all(10),
            width: MediaQuery.of(context).size.width,
            height: 250,
            color: Colors.white,
            child: Column(
              children: [
                // 1. 上部分
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text('${goods['createTime']}'),
                    Text(
                      getOrderState(goods['orderState']),
                      style: const TextStyle(color: Colors.orange),
                    ),
                  ],
                ),
                // 2. 中间部分
                Padding(
                    padding: const EdgeInsets.only(top: 10, bottom: 10),
                    child: Row(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        // 2.1 图片
                        Image.network(
                          goods['image'],
                          width: 120,
                          height: 120,
                        ),
                        // 2.2 右侧
                        Expanded(
                            flex: 1,
                            child: Padding(
                              padding: const EdgeInsets.only(left: 10),
                              child: Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  // 2.2.1 第一行
                                  Row(
                                    children: [
                                      Expanded(child: Text('${goods['name']}')),
                                      const SizedBox(width: 10),
                                      Text('x${goods['totalNum']}'),
                                    ],
                                  ),
                                  const SizedBox(height: 10),
                                  // 2.2.2 第二行
                                  Container(
                                    padding: const EdgeInsets.all(5),
                                    decoration: BoxDecoration(
                                      borderRadius: BorderRadius.circular(5),
                                      color: const Color.fromARGB(
                                          255, 241, 239, 239),
                                    ),
                                    child: Text(
                                      '${goods['attrsText']}',
                                      style:
                                          const TextStyle(color: Colors.grey),
                                    ),
                                  ),
                                  const SizedBox(height: 10),
                                  // 2.2.3 第三行
                                  Text(
                                    '￥${goods['curPrice']}',
                                    style: const TextStyle(color: Colors.red),
                                  ),
                                ],
                              ),
                            ))
                      ],
                    )),
                // 3. 下部分
                Row(
                  mainAxisAlignment: MainAxisAlignment.end,
                  children: [
                    Text('合计：￥${goods['totalNum'] * goods['curPrice']}'),
                  ],
                ),
                const SizedBox(height: 10),
                // 4. 按钮
                Row(mainAxisAlignment: MainAxisAlignment.end, children: [
                  ElevatedButton(
                    onPressed: () {},
                    child: const Text('取消订单'),
                  ),
                  const SizedBox(width: 10),
                  ElevatedButton(
                    onPressed: () {},
                    child: const Text('去支付'),
                  )
                ])
              ],
            )));
  }
}
